<template>
  <div class="box">
    <div class="top">
      <!-- 头像 -->
      <img
        class="avatar"
        v-if="commentData.account.defaultAvatar"
        :src="$axios.defaults.baseURL + commentData.account.defaultAvatar"
        alt=""
      />
      <img
        class="avatar"
        v-else
        src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3478365867,750760666&fm=26&gp=0.jpg"
        alt=""
      />

      <i class="name">
        {{ commentData.account.nickname }}
      </i>
      <span class="time">
        {{ commentData.account.created_at | gettime }}
      </span>
    </div>
    <CommentParent v-if="commentData.parent" :parentData="commentData.parent" />
    <div class="maincontent">
      {{ commentData.content }}
    </div>
    <div class="url" v-for="item in commentData.pics" :key="item.id">
      <div class="url1">
        <img :src="$axios.defaults.baseURL + item.url" alt="" />
      </div>
    </div>
    <div class="btnReply" @click="handleClick">回复</div>
  </div>
</template>

<script>
import CommentParent from "./Parent";
import moment from "moment";
import eventBus from "../../utils/eventBus";
export default {
  props: ["commentData"],
  components: {
    CommentParent,
  },
  filters: {
    gettime(e) {
      console.log(e);
      return moment(e).format("YYYY-MM-DD HH:mm:ss"); //2014-09-24 23:36:09
    },
  },
  methods: {
    handleClick() {
      console.log("点击了");

      console.log(eventBus);
      eventBus.$emit("callReply", this.commentData.id);
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 640px;
  border: 1px solid #ccc;
  border-bottom: 1px dashed #ccc;
  padding: 30px;

  .top {
    display: flex;
    align-items: center;
    .avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .name {
      font-size: 14px;
      color: #666666;
      margin: 0 5px;
    }
    .time {
      color: #999999;
      font-size: 12px;
    }
  }
  .maincontent {
    padding-left: 20px;
    margin: 10px 0;
  }
  .url {
    margin-left: 20px;
    width: 80px;
    height: 80px;
    border: 1px dashed #ddd;
    .url1 {
      width: 70px;
      height: 70px;
      img {
        width: 100%;
        height: 100%;
        margin-left: 5px;
        margin-top: 5px;
      }
    }
  }
  .btnReply {
    visibility: hidden;
    text-align: right;
    font-size: 13px;
    cursor: pointer;
    color: #1e50a2;
  }
}
.box:hover {
  .btnReply {
    visibility: visible;
  }
}
</style>